<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 羽毛球世界</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 页眉 -->
    <header>
        <h1>🏸 羽毛球世界</h1>
        <marquee behavior="scroll" direction="left" class="subtitle">一个优秀的羽毛球运动员需要具备的是马拉松选手的耐力、短跑运动员的速度、跳高运动员的弹跳能力、标枪掷手的臂力、铁匠的腕力、画家的机敏、剑士的反应、象棋手的注意力、极地研究员的坚强、将军的深思熟虑、登山运动员的执着，还有艺术家的直觉与幻想。也正由于对一个人有这么多要求，优秀的羽毛球运动员总是凤毛麟角。</marquee>
    </header>

    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="history.html">羽球历史</a></li>
            <li><a href="players.html">羽球名将</a></li>
            <li><a href="game.html">羽球小游戏</a></li>
        </ul>
    </nav>

    <!-- 主要内容区域 -->
    <main>

        <!-- 轮播图模块 -->
        <section class="carousel">
            <div class="slides">
                <img src="/picture/s1.jpg" alt="羽毛球1" class="active">
                <img src="/picture/s2.jpg" alt="羽毛球2">
                <img src="/picture/s3.jpg" alt="羽毛球3">
            </div>
            <button class="prev">❮</button>
            <button class="next">❯</button>
        </section>

        <!-- 音乐播放器 -->
        <section class="music-player">
            <h2>背景音乐</h2>
            <audio id="bgm" controls>
                <source src="https://www.bensound.com/bensound-music/bensound-energy.mp3" type="audio/mpeg">
                您的浏览器不支持音频播放
            </audio>
            <button onclick="togglePlay()" class="music-btn"><i class="fas fa-play"></i></button>
        </section>

        <!-- 计算器模块 -->
        <section class="calculator">
            <h2>羽毛球消耗计算器</h2>
            <div class="calc-container">
                <input type="text" id="display" readonly>
                <div class="buttons">
                    <!-- 计算器按钮布局 -->
                    <button onclick="appendToDisplay('7')">7</button>
                    <button onclick="appendToDisplay('8')">8</button>
                    <button onclick="appendToDisplay('9')">9</button>
                    <button onclick="appendToDisplay('/')">/</button>
                    <button onclick="appendToDisplay('4')">4</button>
                    <button onclick="appendToDisplay('5')">5</button>
                    <button onclick="appendToDisplay('6')">6</button>
                    <button onclick="appendToDisplay('*')">×</button>
                    <button onclick="appendToDisplay('1')">1</button>
                    <button onclick="appendToDisplay('2')">2</button>
                    <button onclick="appendToDisplay('3')">3</button>
                    <button onclick="appendToDisplay('-')">-</button>
                    <button onclick="appendToDisplay('0')">0</button>
                    <button onclick="appendToDisplay('.')">.</button>
                    <button onclick="calculate()" class="equal">=</button>
                    <button onclick="appendToDisplay('+')">+</button>
                </div>
                <button onclick="clearDisplay()" class="clear">C</button>
            </div>
        </section>

    </main>

    <!-- 页脚 -->
    <footer>
        <p>© 2025 羽毛球世界 
            <a href="#privacy">隐私政策</a> | 
            <a href="#contact">联系我们</a>
        </p>
    </footer>

    <!-- 引入JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>